<template>
  <div>
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入小区或地址"
        @input="onSearch"
        @cancel="onCancel"
        input-align="center"
        background="#f6f6f6"
      />
    </form>
    <van-cell-group v-show="isShow">
  <van-cell :title="item.communityName" v-for="(item,index) in List" :key="index" @click="setCommuntiy(item)" />
</van-cell-group>
  </div>
</template>

<script>
import { setCommuntiy } from '@/utils/stroage'
import { getCoummuntiy } from '@/api/home'
export default {
  created () {
    this.id = this.$route.query.id
    console.log(this.id)
  },
  data () {
    return {
      value: '',
      id: '',
      List: [],
      isShow: false
    }
  },
  methods: {
    async onSearch () {
      console.log(this.value)
      if (this.value !== '') {
        const name = this.value
        const id = this.id
        console.log(id)
        const res = await getCoummuntiy(name, id)
        console.log(res.data.body)
        if (res.data.body) {
          this.List = res.data.body
          // console.log(this.list)
          this.isShow = true
        }
      }
      //
    },
    onCancel () {
      this.$router.back()
    },
    setCommuntiy (item) {
      // console.log(item)
      setCommuntiy(JSON.stringify(item))
      this.$router.back()
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.van-search__content {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  /* padding-left: 12px; */
  padding-left: 0;
  background-color: #f7f8fa;
  border-radius: 2px;
}

/deep/.van-field__control {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: #323233;
  line-height: inherit;
  text-align: center;
  background-color: #fff;
}
/deep/.van-search .van-cell {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  padding: 5px 8px 5px 0;
  background-color: #fff;
}
</style>
